<template>
  <!-- dialog窗口 用于添加和编辑的弹窗-->
  <el-dialog :title="title" @close="dialogClose" :visible="visible">
    <el-form :model="stuForm" :rules="stuRules" ref="stuDialogRuleForm">
      <el-form-item label="头像">
        <el-upload
          class="uploadAvatar"
          ref="uploadAvatar"
          action="/api/students/uploadStuAvatar"
          list-type="picture-card"
          :on-success="uploadSuccess"
          :on-remove="removeAvatar"
          :limit="1"
          name="headimgurl"
          :multiple="false"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="stuForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="项目地址" prop="productUrl">
        <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="班级" prop="class">
        <el-input v-model="stuForm.class" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="stuForm.age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="stuForm.city" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学历" prop="degree">
        <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="stuForm.description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('cancel')">取 消</el-button>
      <el-button type="primary" @click="confirm('stuDialogRuleForm')">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      title: "增加学员信息",
      showAvatar: true,
      stuRules: {
        name: [{ required: true, message: "请输入名字", trigger: "blur" }],
        class: [{ required: true, message: "请输入班级", trigger: "blur" }],
        degree: [{ required: true, message: "请输入学历", trigger: "blur" }],
        city: [{ required: true, message: "请输入城市", trigger: "blur" }],
        productUrl: [
          { required: true, message: "请输入项目地址", trigger: "blur" },
        ],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
      },
      stuForm: {
        name: "",
        productUrl: "",
        headimgurl: "",
        class: "",
        age: "",
        city: "",
        degree: "",
        description: "",
      },
      oldFrom: {},
    };
  },
  created() {},
  mounted() {},
  methods: {
    dialogClose() {
      //dialog关闭时触发的回调
      //通过父组件传递下来的方法,关闭dialog
      this.$emit("cancel");
    },
    uploadSuccess(r) {
      //图片上传成功的回调
      console.log(r);
      //手动给stuForm的headimgurl赋值
      if (r.state) {
        this.stuForm.headimgurl = r.headimgurl;
      } else {
        this.$message.error(r.msg + "-" + r.err);
      }
      // console.log(r);
      // this.stuForm.headimgurl = r.headimgurl;
    },
    removeAvatar(r) {},
    //点击确定按钮
    confirm(formName) {
      //表单本地校验
      this.$refs[formName].validate((valid) => {
        // console.log(valid)
        // console.log(this.stuForm);
        if (valid) {
          this.$emit("ok", this.stuForm);
        }

        //清掉图片上传的列表
        // this.$refs.uploadAvatar.clearFiles()
      });
    },
  },
};
</script>
<style>
.uploadAvatar {
  text-align: left;
}

.el-upload-list__item.is-success,
.el-upload--picture-card {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
}

.el-dialog__header {
  padding: 0 !important;
  line-height: 60px;
}
</style>
